<template>
  <div id="addBusiness" class="app-container">
    <el-steps :active="active" finish-status="success" class="stepper">
      <el-step title="基本信息"></el-step>
      <el-step title="标签配置"></el-step>
      <el-step title="推荐产品"></el-step>
      <el-step title="返利产品"></el-step>
    </el-steps>
    <info v-if="tap=='info'" @goTo="changeTap" ></info>
    <businessLabel v-if="tap=='label'" @goTo="changeTap"></businessLabel>
    <introProduct v-if="tap=='intro'" @goTo="changeTap"></introProduct>
    <rebateProduct v-if="tap=='rebate'" @goTo="changeTap"></rebateProduct>
  </div>
</template>
<script>
import info from '../components/basicInfo'
import businessLabel from '../components/label'
import introProduct from '../components/introProduct'
import rebateProduct from '../components/rebateProduct'
export default {
  components: {
    info, businessLabel, introProduct, rebateProduct
  },
  data() {
    return {
      active: 0,
      tap: 'info'
    }
  },
  watch: {
    tap(val) {
      switch (val) {
        case 'info':
          this.active = 0
          break
        case 'label':
          this.active = 1
          break
        case 'intro':
          this.active = 2
          break
        case 'rebate':
          this.active = 3
          break
      }
    }
  },
  beforeDestroy() {
    sessionStorage.removeItem('businessId')
    sessionStorage.removeItem('businessInfo')
  },
  methods: {
    get(parm) {
      console.log(parm)
    },
    changeTap(tap) {
      console.log(tap)
      this.tap = tap
    }
  }
}
</script>
<style lang="scss" scoped>
  #addBusiness{
    .stepper{
      width:400px;
      margin-left: 60px;
    }
  }
</style>
